<template>
<div>
  <div class="add-shortcut">
    <div class="add-shortcut-type">
      <p>类型</p>
      <label>
        <select v-model="type">
          <option value="文件">文件</option>
          <option value="文件夹">文件夹</option>
          <option value="网址">网址</option>
        </select>
      </label>
    </div>
    <div class="add-shortcut-name">
      <p>名称</p>
      <label style="flex: 1" spellcheck="false">
        <input class="add-shortcut-input" placeholder="请输入名称" v-model="name">
      </label>
    </div>
    <div class="add-shortcut-path">
      <p>路径</p>
      <label style="flex: 1" spellcheck="false">
        <file-select v-if="type === '文件'" v-model="path" type="file" placeholder="请选择文件路径"></file-select>
        <file-select v-else-if="type === '文件夹'"
                     v-model="path"
                     type="directory"
                     placeholder="请选择文件夹路径">
        </file-select>
        <input v-else class="add-shortcut-input" v-model="path" placeholder="请输入网址">
      </label>
    </div>
    <div class="add-shortcut-icon">
      <p>图标</p>
      <label style="flex: 1" spellcheck="false">
        <file-select v-model="icon"
                     type="file"
                     placeholder="请输入图标路径或URL"
                     :filters="[{name: 'Images', extensions: ['jpg', 'jpeg', 'png', 'gif', 'ico', 'svg']}]">
        </file-select>
      </label>
    </div>
    <div class="add-shortcut-operation">
      <span @click="saveContent" class="add-shortcut-button" style="color: #ff0000;">保 存</span>
      <span @click="cancelContent" class="add-shortcut-button">取 消</span>
    </div>
  </div>
  <!-- 遮罩 -->
  <div style="position: fixed;top: 28px;bottom: 40px;left: 0;right: 0;z-index: 1;;background: rgba(0,0,0,0.3)"></div>
</div>
</template>

<script>
import FileSelect from "../fileSelect/FileSelect.vue";

export default {
  name: "addShortcut",
  components: {FileSelect},
  props: {
    data: {
      type: Object,
      default() {
        return {
          type: "文件",
          name: '',
          path: '',
          icon: ''
        }
      }
    }
  },
  data() {
    return {
      type: this.data.type,
      name: this.data.name,
      path: this.data.path,
      icon: this.data.icon,
      defaultShortcutsIcon: this.db('user').get('defaultShortcutsIcon').value()
    }
  },
  methods: {
    saveContent() {
       if (this.name && this.path) {
        this.$emit('save', {
          type: this.type,
          name: this.name,
          path: this.path,
          icon: this.icon ? this.icon : this.defaultShortcutsIcon,
          id: this.data.id
        });
      } else {
        alert("请填写完整内容");
      }
    },
    cancelContent() {
      this.$emit('cancel');
    }
  }
}
</script>

<style scoped>
.add-shortcut > div {
  padding: 10px 15px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.add-shortcut {
  font-size: 14px;
  color: #000;
  width: 90vw;
  padding: 10px 0;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
}

.add-shortcut > div > p {
  width: 44px;
}

.add-shortcut-type select {
  height: 24px;
  outline: none;
  border: 1px solid var(--color-border);
}

.add-shortcut-input {
  width: 100%;
  padding: 2px 4px;
  height: 28px;
  outline: none;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.add-shortcut-operation {
  height: 50px;
  font-size: 12px;
  padding: 0 20px !important;
  display: flex;
  justify-content: flex-end !important;
  align-items: center;
}

.add-shortcut-button {
  border: 1px solid #ccc;
  padding: 6px 10px;
  border-radius: 8px;
  margin-left: 14px;
}

.add-shortcut-button:first-child:hover {
  color: #fff !important;
  background: red !important;
  border: 1px solid red;
}

.add-shortcut-button:last-child:hover {
  color: red !important;
  border: 1px solid red;
}
</style>